<template>
  <div class="home">
    <el-container class="container">
      <el-header class="home-Header">
        <el-row :gutter="20">
          <el-col :span="4"><img src="@/assets/images/logo.png" alt=""></el-col>
          <el-col :span="14"><h3>电商后台管理系统</h3></el-col>
          <el-col :span="6"><span>欢迎上海前端22期星曜会员</span> <a href="javascript:;" @click.prevent='logout'>退出</a></el-col>
        </el-row>
      </el-header>
      <el-container class="home-Main">
        <el-aside width="200px" class="home-Aside">
          <!-- router,是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转 -->
             <el-menu
              :unique-opened='true'
              :router='true'
              default-active="2"
              class="el-menu-vertical-demo"
              background-color="#545c64"
              text-color="#fff"
              active-text-color="#ffd04b">
              <el-submenu :index="level1.id+'0'" v-for='level1 in leftMenus' :key='level1.id'>
                <template slot="title">
                  <i class="el-icon-location"></i>
                  <span>{{level1.authName}}</span>
                </template>
                <!-- 路径未加 / 会有问题 -->
                <el-menu-item :index="level2.path" v-for='level2 in level1.children' :key='level2.id'>
                  <i class="el-icon-menu"></i>
                <span slot="title">{{level2.authName}}</span>
                </el-menu-item>
              </el-submenu>

               <!-- <el-submenu index="2">
                <template slot="title">
                  <i class="el-icon-location"></i>
                  <span>权限管理</span>
                </template>
                <el-menu-item index="roles">
                  <i class="el-icon-menu"></i>
                  <span slot="title">角色列表</span>
                </el-menu-item>
                <el-menu-item index="rights">
                  <i class="el-icon-menu"></i>
                  <span slot="title">权限列表</span>
                </el-menu-item>
              </el-submenu> -->

            </el-menu>
        </el-aside>
        <el-main>
          <!-- 设置子路由出口 -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data () {
    return {
      leftMenus: []
    }
  },
  created () {
    this.getLeftMenus()
  },
  methods: {
    logout () {
      this.$confirm('此操作将永久退出该页面, 是否继续?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 返回登录页，移除token
        this.$router.push('/login')
        localStorage.removeItem('token')
        this.$message({
          type: 'success',
          message: '退出成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消退出'
        })
      })
    },
    async getLeftMenus () {
      const res = await this.$http.get('menus')
      // console.log(res.data)
      this.leftMenus = res.data.data
    }

  }

}
</script>

<style>
.home {
  height: 100%;
}
.container {
  height: 100%;
}
.home-Header {
  background: #b3c1cd;
  line-height: 60px;
}
.home-Header img {
  width: 180px;
}
.home-Header span {
  font-weight: bold;
}
.home-Header a {
  color: orangered;
}
.home-Header h3 {
  font-size: 30px;
  color: #fff;
  text-align: center;
}
.home-Aside {
  background: #545c64;
}
.home-Main {
  background: #eaeef1;
}
</style>
